<template>
  <div class="news-main">
    <h2> 这是news页面 </h2>
    <div class="tinymce-main">
      <Tinymce ref="tin" />
      <el-button type="primary" @click="getTin">获取富文本内容</el-button>

    </div>

    <hr>

    <div class="markdown-main">
      <Markdown ref="md" v-model="mdContent" />
      <el-button type="primary" @click="getMd">获取markdown内容</el-button>

    </div>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce/index.vue'
import Markdown from '@/components/MarkdownEditor'
export default {
  name: 'News',
  components: {
    Tinymce,
    Markdown
  },

  data() {
    return {
      mdContent: `# 标题2222
> 这是标题描述`
    }
  },
  mounted() {
    var str = '<h1 style="color:red">这是初始化</h1>'
    this.$refs.tin.setContent(str)
  },
  methods: {
    getTin() {
      var content = this.$refs.tin.getContent()
      console.log('content==>', content)
    },
    getMd() {
      var html = this.$refs.md.getHtml()
      var val = this.$refs.md.getValue()
      console.log('html', html)
      console.log('val', val)
    }
  }
}
</script>

<style lang='scss' scoped>
    .news-main{
        .tinymce-main,
        .markdown-main{
            width: 90%;
            margin: 30px auto;
        }
    }
</style>
